/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import { StyleSheet, ScrollView } from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import LabelGroup from "../widget/common/LabelGroup";
import * as recyclePriceInfoAction from "../actions/recyclePriceInfoAction"; // 导入action方法
import Button from "../widget/common/NCButton";
import BasePage from "../widget/common/BasePage";

let serviceItem;

class RecyclePriceInfo extends Component {
  constructor(props) {
    super(props);
    serviceItem = NavigatorUtil.getPageParam(props, "serviceItem");
  }

  componentWillMount() {
    const { props } = this;
    props.dispatch(recyclePriceInfoAction.getRecyclePriceInfo(serviceItem.facility_id));
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(recyclePriceInfoAction.recyclePriceInfoUnmount());
  }

  handleClick() {
    const { props } = this;
    const { recyclePriceInfoReducer } = props;
    const { priceInfo } = recyclePriceInfoReducer;
    const values = [];
    for (let i = 0; i < priceInfo.length; i += 1) {
      values.push(this[`label${i}`].getValue());
    }
    NavigatorUtil.goRecycleAccessResult(serviceItem, values);
  }

  render() {
    const { recyclePriceInfoReducer } = this.props;
    const { priceInfo, initing } = recyclePriceInfoReducer;
    return (
      <BasePage style={styles.container} showIniting={initing}>
        <ScrollView style={styles.container}>
          {priceInfo.map((item, index) => (
            <LabelGroup
              key={item.recycle_lable_id}
              labelId={item.recycle_lable_id}
              ref={c => (this[`label${index}`] = c)}
              title={item.lable_name}
              data={item.recycleInfo}
              keyName="child_lable_name"
              valueName="item"
              selectType={item.select_type}
              activeIndexArray={item.select_type === 0 ? [0] : []}
            />
          ))}
          <Button
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title="选好了"
            onPress={() => this.handleClick()}
          />
        </ScrollView>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  buttonText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  button: {
    height: 44 * scale,
    width: ScreenWidth - 64 * scale,
    marginLeft: 32 * scale,
    marginTop: 30 * scale,
    marginBottom: 20 * scale,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.bg_selected,
    borderWidth: 0,
  },
});

const reducers = state => {
  return {
    recyclePriceInfoReducer: state.recyclePriceInfoReducer,
  };
};

export default connect(reducers)(RecyclePriceInfo);
